export default
{
	template: `
	<div id="contain">
		<div id="table">
			<h3>学生管理系统</h3><hr/>
			<table>
				<thead>
					<th>ID</th>
					<th>学生名</th>
					<th>性别</th>
					<th>年龄</th>
					<th>年级</th>
					<th>班级</th>
					<th>操作</th>
				</thead>
				<tr v-for="stu,i in students">
					<td>{{stu.id}}</td>
					<td>{{stu.name}}</td>
					<td>{{stu.sex}}</td>
					<td>{{stu.age}}</td>
					<td>{{stu.grade}}</td>
					<td>{{stu.classes}}</td>
					<td id="action">
						<button @click="del(i)">删除</button>
						<button>修改</button>
					</td>
				</tr>
			</table>
			<hr/>
			<div id="nextPage">
				<button>上一页</button>
				1 / 1
				<button>下一页</button>
			</div>
		</div>
		<div id="add">
			<div class="addGroup">
				<lable for="id">ID：</label>
				<input type="text" v-model="id"/>
			</div>
			<div class="addGroup">
				<lable for="name">学生名：</label>
				<input type="text" v-model="name"/>
			</div>
			<div class="addGroup">
				<lable for="sex">性别：</label>
				<input type="text" v-model="sex"/>
			</div>
			<div class="addGroup">
				<lable for="age">年龄：</label>
				<input type="text" v-model="age"/>
			</div>
			<div class="addGroup">
				<lable for="grade">年级：</label>
				<input type="text" v-model="grade"/>
			</div>
			<div class="addGroup">
				<lable for="classes">班级：</label>
				<input type="text" v-model="classes"/>
			</div>
			<button @click="add">添加</button>
		</div>
	</div>
`,
	data(){
		return {
			students: [
				{id: 1, name: '小白', sex: '男', age: 12, grade: 1, classes: 1},
				{id: 2, name: '小红', sex: '女', age: 12, grade: 1, classes: 1},
				{id: 3, name: '小芳', sex: '女', age: 12, grade: 1, classes: 1},
				{id: 4, name: '小正', sex: '男', age: 13, grade: 1, classes: 1},
				{id: 5, name: '张三', sex: '男', age: 12, grade: 1, classes: 2},
				{id: 6, name: '李四', sex: '男', age: 12, grade: 1, classes: 2},
				{id: 7, name: '王五', sex: '男', age: 13, grade: 1, classes: 2},
			]
		}
	},
	methods: {
		add() {
			setTimeout(() => {
				if (this.id && this.name && this.sex && this.age && this.grade && this.classes) {
					this.students.push({
						id: this.id,
						name: this.name,
						sex: this.sex,
						age: this.age,
						grade: this.grade,
						classes: this.classes
					});
					alert("添加成功");
				} else {
					alert("请输入完整信息");
				}
			}, 1000); // 模拟异步操作
		},
		del(i) {
			this.students.splice(i, 1);
		},
	}
}